<template>
  <div>
    <el-row class="row-bg">
      <el-col :span="6" class="oo oo-left"
        ><div class="grid-content ep-bg-purple" />
        <div class="tu">
          <FooterBottom
            :img="playList[playListIndex].al.picUrl"
            :name="playList[playListIndex].al.name"
            :name2="playList[playListIndex].ar[0].name"
            :id="playList[playListIndex].id"
            :left="left"
            :play="play"
            :right="right"
            :isBtnShow="isBtnShow"
          />
        </div>
        <div class="tu-left">
          <p>{{ playList[playListIndex].name ?? "暂无歌曲" }}</p>
          <p>{{ playList[playListIndex].ar[0].name }}</p>
        </div>
      </el-col>
      <el-col :span="6" class="oo zhong">
        <div>
          <el-button @click="left()" type=""
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shangyishou"></use></svg
          ></el-button>
          <el-button @click="play()" type="">
            <svg class="icon" aria-hidden="true" v-if="isBtnShow">
              <use xlink:href="#icon-bofang1"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-else>
              <use xlink:href="#icon-zanting"></use>
            </svg>
          </el-button>
          <el-button @click="right()" type=""
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiayishou"></use></svg
          ></el-button>
          <audio
            ref="audio"
            :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
          ></audio>
        </div>
      </el-col>
      <el-col :span="9" class="oo"
        ><div class="grid-content ep-bg-purple" />
        <div class="jin">
          <span>{{ time(this.$store.state.musicCurrentTime) }}</span>
          <input
            type="range"
            min="0"
            step="0.05"
            :max="this.$store.state.duration"
            v-model="this.$store.state.musicCurrentTime"
          />
          <span>{{ time(this.$store.state.duration) }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FooterBottom from "./footerBottom.vue";
import { mapState, mapMutations } from "vuex";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      interVal: 0,
      disabled: false,
    };
  },
  computed: {
    ...mapState(["playList", "playListIndex", "isBtnShow", "musicCurrentTime"]),
  },
  components: {
    FooterBottom,
  },
  methods: {
    play: function () {
      if (this.$store.state.playList[0].id != 0) {
        if (this.isBtnShow) {
          this.$refs.audio.play();
          this.upDataIsBtnShow(false);
          clearInterval(this.interValX);
          this.updateTime();
          this.addDuration();
        } else {
          this.$refs.audio.pause();
          this.upDataIsBtnShow(true);
          clearInterval(this.interValX);
        }
      } else {
        ElMessage({
          message: "请先添加歌曲",
          grouping: true,
          type: "warning",
        });
      }
    },
    left: function () {
      if (this.$store.state.playList[0].id != 0) {
        this.upDatePlayListIndex(this.playListIndex - 1);
        clearInterval(this.interValX);
        this.updateTime();
      } else {
        ElMessage({
          message: "请先添加歌曲",
          grouping: true,
          type: "warning",
        });
      }
    },
    right: function () {
      if (this.$store.state.playList[0].id != 0) {
        this.upDatePlayListIndex(this.playListIndex + 1);
        clearInterval(this.interValX);
        this.updateTime();
      } else {
        ElMessage({
          message: "请先添加歌曲",
          grouping: true,
          type: "warning",
        });
      }
    },
    addDuration: function () {
      this.upDataDuration(this.$refs.audio.duration);
    },
    updateTime: function () {
      if (this.$store.state.playList[0].id != 0) {
        this.interVal = setInterval(() => {
          this.upDataMusicCurrentTime(this.$refs.audio.currentTime);
          this.addDuration();
        }, 1000);
      }
    },
    time: function (value) {
      let minute = value / 60;
      let minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      //秒
      let second = value % 60;
      let seconds = Math.round(second);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },
    ...mapMutations([
      "upDataIsBtnShow",
      "upDatePlayListIndex",
      "upDataMusicCurrentTime",
      "upDataDuration",
    ]),
  },
  watch: {
    playList: function (newValue) {
      this.$refs.audio.play();
      this.$refs.audio.autoplay = true;
      this.upDataIsBtnShow(false);
      this.updateTime();
      this.addDuration();
    },
    musicCurrentTime: function (newValue) {
      if (
        newValue > this.$store.state.duration ||
        newValue == this.$store.state.duration
      ) {
        this.$store.state.playListIndex += 1;
        if (
          this.$store.state.playListIndex ==
          this.$store.state.playListIndex - 1
        ) {
          this.$store.state.playListIndex = 0;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-row {
  display: flex;
  align-items: center;
  //background-color: black;
  height: 60px;
}
.tu {
  position: relative;
  border-radius: 10px;
  height: 55px;
  width: 55px;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}
.tu-left {
  //background-color: aliceblue;
  height: 55px;
  width: 220px;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  p {
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 28px;
    margin-left: 10px;
    font-size: 13px;
  }
}
.stop {
  background-color: rgb(183, 78, 78);
}
input {
  width: 395px;
  height: 5px;
  margin: 0 10px;
}
.el-button {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.jin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 493px;
}
</style>